<template>
  <div class="component-upload-image">
    <el-form :inline="true">
      <el-form-item v-for="(item, index) in imageList" :key="index" >
        <el-upload
          action
          accept=".jpg,.jpeg,.png"
          list-type="picture-card"
          :show-file-list="false"
          style="display: inline-block; vertical-align: top"
          :disabled="true">
          <el-image v-if="!item.materialUrl" :src="item.materialUrl">
            <div slot="error" class="image-slot" @click="handleSelectImage">
              <i class="el-icon-plus" />
            </div>
          </el-image>
          <div v-else class="image">
            <el-image
              :src="item.materialUrl"
              :style="`width:146px;height:146px;`"
              fit="contain"
            />
            <div class="mask">
              <div class="actions">
                <span title="左移" @click.stop="handleMoveLeft(item)" v-if="item.isShowLeft" style="margin:0 2px">
                  <i class="el-icon-back" />
                </span>
                <span title="预览" @click.stop="handlePreview(item)" style="margin:0 2px">
                  <i class="el-icon-zoom-in" />
                </span>
                <span title="移除" @click.stop="handleRemoveImage(item)" style="margin:0 2px">
                  <i class="el-icon-delete" />
                </span>
                <span title="右移" @click.stop="handleMoveRight(item)" v-if="item.isShowRight" style="margin:0 2px">
                  <i class="el-icon-right" />
                </span>
              </div>
            </div>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    
    <el-dialog
      :visible.sync="dialogVisible"
      title="预览"
      width="800"
      append-to-body
    >
      <img
        :src="previewItem.materialUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
        v-if="previewItem"
      />
    </el-dialog>
    <el-dialog
      v-if="materialDialogVisible"
      :visible.sync="materialDialogVisible"
      title="素材库"
      width="1400px"
      append-to-body
      top="5%">
      <div class="dialogForm">
        <Material hasDialog @selectMaterialData="handleSelectMaterialData"></Material>
      </div>
    </el-dialog>
    
  </div>
</template>

<script>
import store from "@/store";
import Material from '@/views/material/material/index.vue';


export default {
  model:{
    prop:'images',
    event:'commitMaterial'
  },
  data() {
    return {
      dialogVisible: false,
      // 资料库选择框
      materialDialogVisible:false,
      imageList:this.images,
      previewItem:null,
      isFirst: true,
      returnValue:[]
    };
  },
  props: {
    images:{
      type: Array,
      default:() => []
    }
  },
  watch:{
    images:{
      handler(newValue){
        if(this.isFirst){
          this.imageList = newValue
          this.init()
          if(newValue.length > 0){
            this.isFirst = false
          } 
        }
      },
      immediate: true,
      deep:true
    }
  },
  mounted(){
    //this.init()
  },
  components:{
    Material
  },
  destroyed(){
    this.$bus.$off("selectMaterialData")
  },
  methods: {
    /**
     * 初始化
     */
    init(){
      let array = []
      this.imageList.forEach(item=>{
        console.log(item)
        // if((typeof item == 'string' && item.constructor == String)){
        //   array.push({materialUrl: item})
        // }
        array.push(item)
      })
      this.imageList = array
      // 空图片
      this.imageList.push({
        materialId:'',
        materialUrl:''
      })

      this.formatData()
    },

    /**
     * 格式化数据
     */
    formatData(){
      this.returnValue = []
      console.log(this.imageList)
      for(let i = 0; i < this.imageList.length; i++){
        let item = this.imageList[i]
        if(!item.hasOwnProperty('isShowLeft')){
          this.$set(item, 'isShowLeft', false)
        }
        if(!item.hasOwnProperty('isShowRight')){
          this.$set(item, 'isShowRight', false)
        }
        if(item.materialUrl){
          if(i == 0){
            item.isShowLeft = false
            item.isShowRight = true
          } else if(i == this.imageList.length - 2){
            item.isShowLeft = true
            item.isShowRight = false
          } else {
            item.isShowLeft = true
            item.isShowRight = true
          }
        }
        if(item.materialUrl){
          this.returnValue.push({
            materialId: item.materialId,
            materialUrl: item.materialUrl
          })
        }
      }
     
    },

    /**
     * 修改model
     */
    modifyModel(){
      this.$emit("commitMaterial", this.returnValue)
    },

    /**
     * 左移
     */
    handleMoveLeft(item){
      console.log('左移')
      for(let i = 0; i < this.imageList.length; i++){
        if(this.imageList[i].materialUrl === item.materialUrl){
          this.imageList.splice(i - 1, 0, this.imageList[i]);
          this.imageList.splice(i + 1, 1);
          break
        }
      }
      this.formatData()
      this.modifyModel()
    },

    /**
     * 右移
     */
    handleMoveRight(item){
      console.log('右移')
      for(let i = 0; i < this.imageList.length; i++){
        if(this.imageList[i].materialUrl === item.materialUrl){
          this.imageList.splice(i + 2, 0, this.imageList[i]);
          this.imageList.splice(i, 1);
          break
        }
      }
      this.formatData()
      this.modifyModel()
    },

    /**
     * 移除图片
     */
    handleRemoveImage(item) {
      for(let i = 0; i < this.imageList.length; i++){
        if(this.imageList[i].materialUrl === item.materialUrl){
          this.imageList.splice(i, 1);
          break
        }
      }
      this.formatData()
      this.modifyModel()
    },

    /**
     * 选择图片
     */
    handleSelectImage(item){
      this.materialDialogVisible = true
    },

    /**
     * 预览
     */
    handlePreview(item){
      this.previewItem = item
      this.dialogVisible = true
    },

    //重置表单
    closeDialog() {
      this.materialDialogVisible = false
    },

    /**
     * 选择素材
     */
    handleSelectMaterialData(items){
      items.forEach(item=>{
        this.imageList.splice(this.imageList.length - 1 , 0 , {
          materialId: item.id,
          materialUrl: item.materialUrl
        })
      })
      this.formatData()
      this.modifyModel()
      this.closeDialog()
    }
  }
};
</script>

<style scoped lang="scss">
.image {
  position: relative;

  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 146px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }

  &:hover .mask {
    opacity: 1;
  }
}

::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .dialogForm .form-outer {
  padding: 0 20px;
  .form-inner {
    padding: 0;
  }
}
</style>